// 引入全局样式和变量
@import "@/assets/css/var.scss"; // 引入变量文件，通常包含全局的颜色、间距等变量
@import "@/assets/css/global.scss"; // 引入全局样式文件，包含全局的样式规则


// 大于等于指定屏幕宽度的媒体查询（大屏幕设备）
@media screen and (min-width: $sm) {
  .sign {
    width: 350px; // 设置 .sign 元素的宽度为 300px
    position: absolute; // 绝对定位，使元素可以相对于其最近的定位祖先元素进行定位
    left: 50%; // 水平居中对齐（相对于视口宽度的 50%）
    //top: 50%; // 垂直居中对齐（相对于视口高度的 50%）
    //top: $header-height + 60px; // 顶部位置设置为头部高度加上 60px
    transform: translateX(-50%); // 使用 transform 平移使元素水平居中
  }
}

// 小于指定屏幕宽度的媒体查询（小屏幕设备）
@media screen and (max-width: $sm) {
  .sign {
    width: 65vw; // 设置 .sign 元素的宽度为视口宽度的 60%
    position: absolute; // 绝对定位，以便更好地进行垂直居中
    //top: 50%; // 垂直居中对齐（相对于视口高度的 50%）
    left: 50%; // 水平居中对齐（相对于视口宽度的 50%）
    transform: translate(-50%, -50%); // 使用 transform 平移使元素水平和垂直居中
  }
}

// .sign 元素的通用样式
.sign {
  padding: 10px 50px 10px 50px ; // 内边距：上下 30px，左右 50px
  border-radius: 10px; // 圆角：10px
  background-color: $color-blue-shallow; // 背景色使用变量 $color-grey 的值
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.25); // 四周发散的阴影，模糊半径为 30px，透明度为 15%

  // .sign 元素内部的 .sign-head 子元素的样式
  .sign-head {
    text-align: center; // 文字居中对齐
    margin-bottom: 10px; // 底部外边距：10px
    font-size: 25px; // 字体大小：25px
    font-weight: 900; // 字体粗细：900（半粗体）
  }

  .el-form-item {
    margin: 0;
    padding-bottom: 15px;
    .el-input {
      //height: 40px; // 确保按钮和输入框高度一致
      width: 100%;
      padding-bottom: 0px; // 调整内边距以确保高度对齐
    }
    .el-button {
      //margin: 0;
      //padding-top: 5px;
      //height: 40px; // 确保按钮和输入框高度一致
      width: 25%;
      //padding: 2px; // 调整内边距以确保高度对齐
    }

  }


  // .sign 元素内部的 .sign-btn 子元素的样式
  .sign-btn:deep(.el-form-item__content) {
    //@include layout(space-between); // 使用 layout mixin，设置子元素之间的空间分配为均匀
    button {
      margin-right: 20px;
      //width: 50%; // 按钮宽度设置为父元素宽度的 50%
    }
  }
}
